Images, media, and form elements
图像、媒体和表单元素
图像和视频被描述为替换元素(replaced element)。CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其他元素的位置。
调整图像大小
处理溢出问题一个是用max-width
,
还有就是用object-fit
,fill,contain,cover,none,scale-down(内容的尺寸与 none
或 contain
中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。)
.cover {
object-fit: cover;
}
<div class="wrapper">
<div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
<div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
</div>
布局中的替换元素
替换元素在成为网格或者弹性布局的一部分时,有不同的默认行为,图像不会被拉伸,而会对齐到网格区域或者弹性容器的起始处。
form元素
很多表单控件是通过 <input>
元素添加到网页上的。该元素定义了简单的表单区域,例如文字输入。更进一步还有 HTML5 新加入的更加复杂的区域,例如颜色和日期撷取器。另外还有一些其他元素,例如用于多行文本输入的 <textarea>
,以及那些用来包含和标记表单特定部分的元素,例如 <fieldset>
和 <legend>
。
HTML5 还包含了允许 Web 开发者指定必填区域的特性,甚至还能检验填入内容的类型。如果用户输入了一些不符合要求的内容,或者未填写必填区域,浏览器会显示错误提示。不同的浏览器在给此类元素样式化和 自定义方面不尽相同。
继承和表单元素
在一些浏览器中,表单元素默认不会继承字体样式,如果需要你要加入以下规则:、
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
form元素与box-sizing
盒模型课中学了box-sizing
。为了保证统一,最好将所有元素的内外边距都设为 0
,然后在单独进行样式化控制的时候将这些加回来。
button,
input,
select,
textarea {
box-sizing: border-box;
padding: 0;
margin: 0;
}
其他有用的设置
除了上面提到的规则以外,你也应该在 <textarea>
上设置 overflow: auto
以避免 IE 在不需要滚动条的时候显示滚动条:
textarea {
overflow: auto;
}
将一切都放在一起“重置”
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea {
overflow: auto;
}
通用样式表被许多开发者用作所有项目的一系列基础样式,典型就是那些做了和以上提到相似的事情的那些,在你开始自己的 CSS 作业前,它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了,因为浏览器显著地要比以往更加统一。但是,如果你想要看一个例子,可以看看这个Normalize.css,它被许多项目用作基础,是非常流行的样式表。
至于样式化表单的更加深入的信息,可以看下这些教程的 HTML 一节的这两篇文章: